<script setup lang="ts">
import dayjs from 'dayjs';
import { ref } from 'vue';
import 'dayjs/locale/zh-cn';

dayjs.locale('zh-cn');

const props =defineProps<{
	isPower:boolean;
	bgColor:string;
}>()
const powered= ref(props.isPower);
const bgColor=ref(props.bgColor);
const nowTime = ref(dayjs());
setInterval(() => {
	nowTime.value = dayjs();
},6*1000);

function power(){
	powered.value=!powered.value;
	if(!props.isPower&&powered.value){
		setTimeout(() => {
			powered.value=false;
		}, 5000);
	}
}
</script>

<template>
  		<div class="phone" @click="power">
			<div v-if="powered" class="screen" :style="`background-color:${bgColor}`">
				<div class="head">
					<div class="operator">中国电信</div>
					<div class="camara"></div>
					<div class="infos"> 
						<div class="signal">
							<div></div>
							<div></div>
							<div></div>
							<div></div>
							<div></div>
						</div>
						<div class="bettery">100</div>
					</div>
				</div>
				<div class="body">
					<div class="time">
						<div>{{nowTime.format('HH:mm')}}</div>
						<div>{{nowTime.format('YYYY-MM-DD')}} {{nowTime.format('dddd')}}</div>
					</div>
				</div>
			</div>
		</div>
</template>

<style scoped>
.phone {
	width: 10em;
	height: 20em;
	background-color: #000;
	border-radius: 1.5em;
	padding:0.5em;
}
.screen {
	width: 9em;
	height: 19em;
	/* background-color: #019c9c; */
	border-radius: 1em;
	/* margin: 0.5em; */
}
.head {
	width: 9em;
	height: 2em;
	border-radius: 1em 1em 0 0;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;
}
.head .operator{
	width: 4em;
	font-size: 0.4em;
	margin-left:1em;
	color: white;
}
.head .camara {
	width: 0.5em;
	height: 0.5em;
	background-color: #000;
	border-radius: 0.25em;
}
.head .infos {
	width: 4em;
	height: 1em;
	font-size: 0.6em;
	display: flex;
	flex-direction: row;
	justify-content: end;
	align-items: center;
	color: white;
}
.head .infos .signal {
	width: 1.5em;
	height: 1em;
	display: flex;		
	align-items: flex-end;
	margin-right: 0.5em;
}
.head .infos .signal div {
	width: 0.5em;
	margin-right: 0.08em;
    background-color: #fff;
}
.head .infos .signal div:nth-child(1) {
    height: 20%;
}
.head .infos .signal div:nth-child(2) {
    height: 40%;
}
.head .infos .signal div:nth-child(3) {
    height:60%;
}
.head .infos .signal div:nth-child(4) {
    height: 80%;
}
.head .infos .signal div:nth-child(5) {
    height: 100%;
}
.head .infos .bettery {
	width: 2.5em;
	height: 1.8em;
	font-size: 0.6em;
	border: 0.1em solid #fff;
}
.body {
}
.body .time {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 1em;
}
.body .time div:nth-child(1) {
    font-size: 2.5em;
}
.body .time div:nth-child(2) {
    font-size: 0.75em;
}
.body .time div {
	width: 100%;
	height: 50%;
	font-size: 1em;
	color: white;
}
</style>